import React, { Component } from 'react';
import * as echarts from 'echarts';
import Data from './sevices/api';
class Index extends Component {
    state = {
        option: {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        },
        option1 : {
            title: {
              text: 'Stacked Line'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              
            ]
          }
    }
    initCharts = (option) => {

        // 基于准备好的dom，初始化echarts实例
        this.charts = echarts.init(document.getElementById('main'));
        // 绘制图表
        this.charts.setOption(option);
    }
    initCharts1 = (option1) => {
        this.charts1 = echarts.init(document.getElementById('main1'));
        // 绘制图表
        this.charts1.setOption(option1);
    }
    getsimpleData = async () => {
        let res = await Data['simpleData']()
        console.log(res);
        this.setState({
            option: {
                ...this.state.option, xAxis: { data: res.data.data.map(item => item.x) }, series: { ...this.state.option.series, data: res.data.data.map(item => item.val) }
            }
        }, () => {
            this.initCharts(this.state.option)
        }
        )
    }
    getkdata = async () => {
        let res = await Data['kdata']()
        console.log(res);
        this.setState({
            option1:{
                ...this.state.option1,xAxis:{data:res.data.data.x.map(item=>item)},series:res.data.data.val.map((item,i)=>{
                    return {
                        name: res.data.data.x[i],
                        type: 'line',
                        stack: 'Total',
                        data:item
                    }
                })
            }
        },()=>{
            this.initCharts1(this.state.option1)
        })

    }
    componentDidMount() {
        this.initCharts(this.state.option)
        this.initCharts1(this.state.option1)
        this.getsimpleData()
        this.getkdata()
    }
    render() {  
        return (
            <div >
                <div id='main1' style={{ width: '600px', height: '400px' }}></div>

                <div id='main' style={{ width: '600px', height: '400px' }}></div>
            </div>
        );
    }
}

export default Index;
